<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { useStore } from '@/stores/data'

const store = useStore()

// 本地表单（直接拷贝后端对象）
const form = reactive<any>({})
// 原始快照（用于 diff）
const original = ref<any>({})

// 文本缓冲区：main 一个整篇；其余 *Txt 用“每行一个”的多行框
const mainTxtRaw = ref('')           // 显示为一整篇话
const giftTxtText = ref('')          // 每行一个 item
const likeTxtText = ref('')
const loveTxtText = ref('')
const welcomeTxtText = ref('')

// mainTxtSpace 两个输入框（区间）
const mainTxtSpace0 = ref<number | string>('')
const mainTxtSpace1 = ref<number | string>('')

// 深拷贝
const cloneDeep = (obj: any) => JSON.parse(JSON.stringify(obj))

// 初始化
onMounted(async () => {
  await store.getConfig()
  initForm()
})

function initForm() {
  const src = cloneDeep(store.userConfig || {})
  Object.keys(src).forEach(k => (form[k] = src[k]))
  original.value = cloneDeep(src)

  // mainTxt：把数组拼成一整篇话（不加分隔，直接连起来）
  mainTxtRaw.value = Array.isArray(form.mainTxt) ? form.mainTxt.join('') : (form.mainTxt || '')

  // 其他 *Txt：按“每行一个”展示
  giftTxtText.value    = Array.isArray(form.giftTxt)    ? form.giftTxt.join('\n')    : ''
  likeTxtText.value    = Array.isArray(form.likeTxt)    ? form.likeTxt.join('\n')    : ''
  loveTxtText.value    = Array.isArray(form.loveTxt)    ? form.loveTxt.join('\n')    : ''
  welcomeTxtText.value = Array.isArray(form.welcometxt) ? form.welcometxt.join('\n') : ''

  // mainTxtSpace：固定两格
  if (Array.isArray(form.mainTxtSpace) && form.mainTxtSpace.length >= 2) {
    mainTxtSpace0.value = form.mainTxtSpace[0]
    mainTxtSpace1.value = form.mainTxtSpace[1]
  } else {
    // 没有则给默认值
    mainTxtSpace0.value = 0.2
    mainTxtSpace1.value = 0.3
  }
}

// ============ 提交前的转换逻辑 ============

// 你的切分逻辑（主话术 mainTxt 专用）
function buildMainTxtBySentenceMerge(text: string): string[] {
  // 1) 按换行切段，去空行
  const lines = (text || '')
    .split('\n')
    .map(s => s.trim())
    .filter(s => s !== '')

  // 2) 每段再按。！？切句
  let sentences: string[] = []
  const re = /[^。！？]+[。！？]+|[^。！？]+$/g
  lines.forEach(line => {
    const parts = line.match(re)
    if (parts) sentences.push(...parts)
    else sentences.push(line)
  })

  // 3) 过滤空与少于两个字
  sentences = sentences.filter(s => {
    const t = s.trim()
    return t !== '' && t.length >= 2
  })

  // 4) 合并：不足 50 字向后追加
  const combined: string[] = []
  let tmp = ''
  for (let i = 0; i < sentences.length; i++) {
    tmp += sentences[i]
    if (tmp.length >= 50) {
      combined.push(tmp)
      tmp = ''
    }
  }
  if (tmp) combined.push(tmp)

  return combined
}

// 通用：每行一个 item（过滤空行，去两端空格）
function splitLines(text: string): string[] {
  return (text || '')
    .split('\n')
    .map(s => s.trim())
    .filter(s => s !== '')
}

// 仅提交变化字段
function isEqual(a: any, b: any) {
  return JSON.stringify(a) === JSON.stringify(b)
}

function diffObject(curr: any, base: any) {
  const out: any = {}
  const keys = new Set([...Object.keys(curr || {}), ...Object.keys(base || {})])
  keys.forEach(k => {
    if (!isEqual(curr[k], base[k])) out[k] = curr[k]
  })
  return out
}

async function submitChanges() {
  // 先构造“提交时的规范对象”（对 *Txt / mainTxt / mainTxtSpace 执行转换）
  const current = cloneDeep(form)

  // mainTxtSpace：强制写回两个数
  const n0 = Number(mainTxtSpace0.value)
  const n1 = Number(mainTxtSpace1.value)
  current.mainTxtSpace = [
    isNaN(n0) ? 0 : n0,
    isNaN(n1) ? 0 : n1,
  ]

  // mainTxt：用“句子切分 + 合并≥50字”规则
  current.mainTxt = buildMainTxtBySentenceMerge(mainTxtRaw.value)

  // 其他 *Txt：每行一个
  current.giftTxt    = splitLines(giftTxtText.value)
  current.likeTxt    = splitLines(likeTxtText.value)
  current.loveTxt    = splitLines(loveTxtText.value)
  current.welcometxt = splitLines(welcomeTxtText.value)

  // 只提交有变化的字段
  const changes = diffObject(current, original.value)
  if (Object.keys(changes).length === 0) {
    alert('没有改动需要提交')
    return
  }

  try {
    await store.updateConfig(changes)
    alert('已提交修改')
    // 刷新基线
    Object.keys(current).forEach(k => (form[k] = current[k]))
    original.value = cloneDeep(current)
  } catch (e: any) {
    console.error(e)
    alert(e?.message || '提交失败')
  }
}
</script>

<template>
  <div>
    <!-- 你原本的简单罗列写法，全部用 input / textarea。 -->


    <div>
      <span>违禁词替换方式：bannedType：</span>
      <input v-model="form.bannedType" type="text" />
    </div>

    <div>
      <span>违禁词：bannedlist：</span>
      <div v-for="(it, idx) in (form.bannedlist || [])" :key="idx">
        <span>origin：</span><input v-model="it.origin" type="text" />
        <span>target：</span><input v-model="it.target" type="text" />
      </div>
    </div>


    <div>
      <span>dsApiKey：</span>
      <input v-model="form.dsApiKey" type="text" />
    </div>

    <div>
      <span> dsBaseUrl：</span>
      <input v-model="form.dsBaseUrl" type="text" />
    </div>

    <div>
      <span>dsModel：</span>
      <input v-model="form.dsModel" type="text" />
    </div>

    <div>
      <span>ds间隔：dsSpace：</span>
      <input v-model.number="form.dsSpace" type="number" />
    </div>

    <div>
      <span>dsu角色配置：dsUser：</span>
      <input v-model="form.dsUser" type="text" />
    </div>

    <div>
      <span>抖音号：dyName：</span>
      <input v-model="form.dyName" type="text" />
    </div>

    <!-- giftTxt：每行一个 -->
    <div>
      <span>礼物感谢话术：giftTxt（每行一个）：</span>
      <div>
        <textarea v-model="giftTxtText" rows="6" style="width: 100%;"></textarea>
      </div>
    </div>

    <div>
      <span>礼物感谢间隔：giftTxtSpace：</span>
      <input v-model.number="form.giftTxtSpace" type="number" />
    </div>

    <!-- likeTxt：每行一个 -->
    <div>
      <span>点赞话术：likeTxt（每行一个）：</span>
      <div>
        <textarea v-model="likeTxtText" rows="6" style="width: 100%;"></textarea>
      </div>
    </div>

    <div>
      <span>点赞间隔：likeTxtSpace：</span>
      <input v-model.number="form.likeTxtSpace" type="number" />
    </div>

    <!-- loveTxt：每行一个 -->
    <div>
      <span>关注话术：loveTxt（每行一个）：</span>
      <div>
        <textarea v-model="loveTxtText" rows="6" style="width: 100%;"></textarea>
      </div>
    </div>

    <div>
      <span>关注间隔：loveTxtSpace：</span>
      <input v-model.number="form.loveTxtSpace" type="number" />
    </div>

    <div>
      <span>话术重写：mainReload：</span>
      <input v-model="form.mainReload" type="checkbox" />
    </div>

    <!-- mainTxtSpace：固定两个输入框 -->
    <div>
      <span>话术间隔（区间）：mainTxtSpace（区间）：</span>
      <input v-model="mainTxtSpace0" type="number" step="0.1" />
      <input v-model="mainTxtSpace1" type="number" step="0.1" />
    </div>

    <!-- mainTxt：多行文本，一整篇话；提交时切句 -->
    <div>
      <span>主话术：mainTxt（整篇，提交时自动切句）：</span>
      <div>
        <textarea v-model="mainTxtRaw" rows="10" style="width: 100%;"></textarea>
      </div>
    </div>

    <div>
      <span>音频抽帧：musicType：</span>
      <input v-model="form.musicType" type="checkbox" />
    </div>

    <div>
      <span>阅读方式：speakType：</span>
      <input v-model="form.speakType" type="checkbox" />
    </div>

    <div>
      <span>欢迎间隔：welcomeSpace：</span>
      <input v-model.number="form.welcomeSpace" type="number" />
    </div>

    <!-- welcometxt：每行一个 -->
    <div>
      <span>欢迎话术：welcometxt（每行一个）：</span>
      <div>
        <textarea v-model="welcomeTxtText" rows="6" style="width: 100%;"></textarea>
      </div>
    </div>

    <div>
      <span>智普key：zpApiKey：</span>
      <input v-model="form.zpApiKey" type="text" />
    </div>

    <div>
      <span>智普model：zpModel：</span>
      <input v-model="form.zpModel" type="text" />
    </div>

    <div>
      <span>智普角色：zpUser：</span>
      <input v-model="form.zpUser" type="text" />
    </div>


    <div style="margin-top: 12px;">
      <button type="button" @click="submitChanges">提交修改（仅提交变更字段）</button>
    </div>
  </div>
</template>

<style scoped>
/* 按你的要求，不写样式 */
</style>
